<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    	<title>Dojo Toolkit Test Page</title>    
    
	<!-- load the dojo toolkit base -->
	<script type="text/javascript" src="resources/js/dojo-release-1.1.1/dojo/dojo.js"
	    djConfig="parseOnLoad:true, isDebug:true"></script>
	    
    
	<script type="text/javascript">
	/* our JavaScript will go here */
	// a very common method of loading code onLoad
    var init = function(){
    console.log("I run after the page is ready. See this in the console");	
    };
    dojo.addOnLoad(init);
    
    // and/or pass an anonymous function
    dojo.addOnLoad(function(){
    console.log("I also run, but second. "); 
    });
  </script>
  

<script type="text/javascript">
    dojo.require("dijit.form.Button");
    dojo.require("dijit.TitlePane");
    dojo.addOnLoad(function(){
    dojo.byId("testHeading").innerHTML = "Powered By Nicolas!";
    console.log("onLoad fires after require() is done"); 
});

	</script>
	
	<script type="text/javascript">
	dojo.addOnLoad(function(){
	dojo.style("testHeading","opacity","0"); // hide it 
	var anim1 = dojo.fadeOut({ node: "testHeading", duration:700 });
	var anim2 = dojo.animateProperty({
		node: "testHeading", delay: 1000,
		properties:{
			// fade back in and make text bigger
			opacity: { end: 1 }, fontSize: { end:19, unit:"pt"}
		}
	}); 
	anim1.play();
	anim2.play();	
});

</script>
    
	<style type="text/css">
	/* our CSS can go here */    
	</style>    
    </head>
    <body class="tundra"><!-- this is a Typical WebPage starting point ... -->
        <h1 id="testHeading">Dojo Skeleton Page</h1>		
    	<div id="contentNode">
	    <p>Some Content To Replace</p>
	</div>
	
	<button id="b1" style="background: yellow;">button #1</button>
	<button id="b2" style="background: orange;">button #2</button>
	<button id="b3" style="background: violet;">button #3</button>

    </body>
</html>
